import CellText from './cellText.js'

const CELL = {
  x: null,
  y: null,
  width: 110,
  height: 110,
  cornerRadius: 3,
  margin: 12,
  fill: 'rgba(205, 193, 180, 1.0)'
}
var width = document.documentElement.clientWidth
//初始化画布宽高，适配移动端不同机型
if (width >= 980) {
  CELL.width = 110;
  CELL.height = 110;
} else if (width >= 650) {
  CELL.width = 100;
  CELL.height = 100;
  CELL.margin = 8
} else {
  CELL.width = 60;
  CELL.height = 60;
  CELL.margin = 8
}

const position = {
  col: null,
  row: null
}

// 方块类
function Cell(position = position) {
  this.init(position)
}

// 初始化
Cell.prototype.init = function (position) {
  this.config = JSON.parse(JSON.stringify(CELL))
  this.toPosition(position)
  this.id = `${this.col}-${this.row}`
  this.value = ''

  this.rect = null
  this.tween = null // 补间动画
  this.text = new CellText(this.config)

  this.config.x = this.config.width * this.col + this.config.margin * (this.col + 1)
  this.config.y = this.config.height * this.row + this.config.margin * (this.row + 1)
}
// 重置
Cell.prototype.reset = function(){
  this.appear()
}
// 设置rect实例
Cell.prototype.setRect = function (rect) {
  this.rect = rect
}

// 更改值
Cell.prototype.setValue = function (value = null) {
  this.value = value // 树脂
  this.text.setText(value)
}
// 设置 迁移坐标xy
Cell.prototype.toPosition = function(position){
  this.col = position.col
  this.row = position.row
  this.config.toX = this.config.width * this.col + this.config.margin * (this.col + 1)
  this.config.toY = this.config.height * this.row + this.config.margin * (this.row + 1)
}
// 出现
Cell.prototype.appear = function (value=null) {
  this.value = value
  this.tween = new Konva.Tween({
    node: this.rect,
    duration: 0.2,
    x: this.config.toX,
    y: this.config.toY,
    width: this.config.width,
    height: this.config.height,
    fill: this.getColor(value),
    easing: Konva.Easings.EaseOut
  })
  this.tween.play()
  this.text.appear(this.config.toX,this.config.toY,value)
}
// 移动
Cell.prototype.move = function (position) {
  this.toPosition(position)
  this.tween = new Konva.Tween({
    node: this.rect,
    duration: 0.2,
    x: this.config.toX,
    y: this.config.toY,
    width: this.config.width,
    height: this.config.height,
    fill: this.getColor(),
    easing: Konva.Easings.EaseInOut,
  })
  this.tween.play()
  this.text.move(this.config.toX,this.config.toY)
}
// 查找颜色值
Cell.prototype.getColor = function (value) {
  let val = value || this.value
  if (val == null) {
    return 'rgba(238, 228, 218, 0.35)';
  } else if (val == 2) {
    return "#eee4da"
  } else if (val == 4) {
    return '#ede0c8';
  } else if (val == 8) {
    return '#f2b179';
  } else if (val == 16) {
    return '#f59563';
  } else if (val == 32) {
    return '#f67c5f';
  } else if (val == 64) {
    return '#f65e3b';
  } else if (val == 128) {
    return '#edcf72';
  } else if (val == 256) {
    return '#edcc61';
  } else if (val == 512) {
    return '#edc850';
  } else if (val == 1024) {
    return '#edc53f';
  } else if (val == 2048) {
    return '#edc22e';
  } else {
    return '#3c3a32';
  }
}

export default Cell